<template>
  <div class="">
    <ul class="con">
      <li v-for="item in list" :key="item._id" @click="gotodetail(item)">
        <img :src="item.pic" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    gotodetail(item) {
      // this.$router.push({ path: "/detail" });
      // this.$router.push("/detail");
      //编程式导航 用js控制路由跳转
      //   $router是一个路由对象 ，往路由对象中添加一个路径，就是跳转到这个路径
      // 路由跳转时候传参指的是在跳转的时候携带一些参数
      // 第一种传参：query传参
      // this.$router.push({ path: "/detail", query: { item: item } });
      // this.$router.push({ path: "/detail", query: { id: item._id } });
      // json数据可以把整条数据作为参数传递过去，然后在详情页展示，如果是接口的话就是把id传过去，在详情页通过id请求详情接口的数据
      // 第二种传参 params传参
      // params传参时用name跳转
      this.$router.push({ name: "detail", params: { item: item } });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.con {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    display: flex;
    flex-direction: column;
    img {
      width: 80%;
    }
  }
}
</style>
